<template>
    <div class="product">
        <div class="product-show">
            <mt-swipe @change="changeSwiper" :auto='0' :show-indicators="false">
                <mt-swipe-item v-for="(item, index) in productImg" :key="index">
                    <img :src="item['image_url']" alt="">
                </mt-swipe-item>
            </mt-swipe>
            <div class="num-label">
                <span>{{currentIndex}}/{{productImg.length}}</span>
            </div>
        </div>
        <div class="product-name">
            <p>
                {{productMsg.name}}
            </p>
        </div>
        <div class="product-price">
            <div class="price">
                <span>￥{{productMsg.items[0]['price']}}</span>
                <span>￥{{productMsg.items[0]['prime_cost']}}</span>
                <span>销量 {{productMsg['sales_volume']}}</span>
                <span>收藏 {{productMsg['collection']}}</span>
            </div>
            <div class="collect" @click="joinCollect">
                <img src="~assets/icons/collect.png" alt="">
                <span>收藏</span>
            </div>
        </div>
        <div class="product-standard" @click="chooseStandard">
            <span>请选择规格数量
                <span v-show="buyNum > 0">{{buyNum}},{{choosedStatus}}</span>
            </span>
            <img src="~assets/icons/arrow.png" alt="">
        </div>
        <div class="user-comment">
            <div class="comment-head">
                <div class="left">
                    <span>用户说</span>
                    <span>（{{commentLength}}）</span>
                </div>
                <!-- <div class="right">
                    <span>好评率</span>
                    <span>100%</span>
                    <img src="~assets/icons/arrow.png" alt="">
                </div> -->
            </div>
            <div class="user-avatar" v-if="commentLength > 0">
                <div class="avatar-msg">
                    <div class="avatar-box">
                        <img :src="userComment.headimgurl" alt="">
                    </div>
                    <span>{{userComment.nickname}}</span>
                    <span>商城购买{{userComment.number}}次</span>
                </div>
                <div class="stars-level">
                    <div class="star" v-for="(item,index) in 5" :key="index">
                        <img src="~assets/icons/star_orange.png" alt="" v-show="index <= userComment.degree-1">
                        <img src="~assets/icons/star_empty.png" alt="" v-show="index > userComment.degree - 1">
                    </div>
                </div>
            </div>
            <div class="comment-content" v-if="commentLength > 0">
                <p>{{userComment.content}}</p>
                <p>{{userComment.pay_time}}</p>
            </div>
            <div class="more-comment" @click="toMoreComment" v-if="commentLength > 0">
                <span>查看全部用户说</span>
                <img src="~assets/icons/arrow.png" alt="">
            </div>
        </div>
        <div class="product-detail">
            <div class="detail-img-box"  v-for="(item,index) in productDetailImages" :key="index" >
                <img :src="item['image_url']" alt="">
            </div>
        </div>
        <div class="buy-btns">
            <div class="left">
                <div class="icon" @click="toShopping">
                    <img src="~assets/icons/store1.png" alt="">
                    <span>购物车</span>
                </div>
                <div class="icon" @click="toHome">
                    <img src="~assets/icons/store2.png" alt="">
                    <span>首页</span>
                </div>
                <!-- <div class="icon" @click="shareToWx">
                    <img src="~assets/icons/store3.png" alt="">
                    <span>分享</span>
                </div> -->
            </div>
            <div class="middle" @click="addToStore">
                <span>加入购物车</span>
            </div>
            <div class="right" @click="buyNow">
                <span>立即购买</span>
            </div>
        </div>
        <div class="layer">
            <div class="layer-content" ref="layers" :style="{transition: trans, transform:'translateY('+layerStyle.transY+'rem)'}">
                <div class="close-layer" @click="closeLayer">
                    <img src="~assets/icons/close.png" alt="">
                </div>
                <div class="product-price-layer">
                    <div class="product-img">
                        <img :src="avatar" alt="">
                    </div>
                    <div class="product-price-detail">
                        <p>￥{{currentPrice || productMsg.items[0]['price']}}</p>
                        <p>请选择规格数量</p>
                    </div>
                </div>
                <div class="product-kinds">
                    <div class="kinds-title">
                        <span>分类</span>
                    </div>
                    <div class="kinds-list">
                        <div class="kinds-detail" v-for="(item,index) in productMsg.labels" :key="index">
                            <span @click="chooseKinds(index, item.label, item.labelId, item.price, item.stock)" :class="{kindsActive: chooseKindNum == index}">{{item.label}}</span>
                        </div>
                        <!-- <div class="kinds-detail">
                            <span @click="chooseKinds(1)" :class="{kindsActive: chooseKindNum == 1}">新西兰贺寿利双层牛奶片（缤纷莓果味）</span>
                        </div>
                        <div class="kinds-detail">
                            <span @click="chooseKinds(2)" :class="{kindsActive: chooseKindNum == 2}">新西兰贺寿利双层牛奶片（曲奇饼干味）</span>
                        </div> -->
                    </div>
                </div>
                <div class="buy-num">
                    <div class="buy-num-title">
                        <span>数量</span>
                    </div>
                    <div class="btns-group">
                        <div class="group">
                            <span @click="decrease">-</span>
                            <span>{{buyNum}}</span>
                            <span @click="increase">+</span>
                        </div>
                        <div class="limit">
                            <!-- <span>限购数量10件</span> -->
                        </div>
                    </div>
                    <div class="inventory">
                        <span>库存数{{stock}}</span>
                    </div>
                </div>
                <div class="confing-btn" @click="closeLayer">
                    <span>确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';
import wx from 'weixin-js-sdk';

export default {
    name:'product',
    data(){
        return {
            productImg:[],
            productDetailImages:[],
            currentIndex:1,
            layerStyle:{
                height:0,
                transY:20
            },
            chooseKindNum:1000000,
            clientHeight:0,
            trans:'',
            productId:-1,
            productMsg:{
                items:{
                    price:0,
                    prime_cost:0
                }
            },
            status:{},
            stock:0,
            buyNum:0,
            choosedStatus:'',
            statusId:0,
            avatar:'',
            currentPrice: 0,
            starNum:3,
            userComment:{},
            commentLength:0
        }
    },
    methods:{
        changeSwiper(index){
            this.currentIndex = index + 1;
        },
        chooseKinds(index, name, id, price, stock){
            this.chooseKindNum = index;
            this.choosedStatus = name;
            this.statusId = id;
            this.currentPrice = price;
            this.stock = stock;
        },
        chooseStandard(){
            this.layerStyle.transY = 0;
            this.trans = 'all 0.5s linear';
        },
        closeLayer(){
            this.layerStyle.transY = this.clientHeight;
        },
        toShopping(){
            this.$router.push('/container/shopping');
            sessionStorage.setItem('tabNum',3);
        },
        toHome(){
            this.$router.push('/container/home');
            sessionStorage.setItem('tabNum',0);
        },
        joinCollect(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = that.$route.query.id;
            let loader = that.loading('正在加入...');
            that.$ajax(that, 'get', that.$api.collectAdd+id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('收藏成功');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        },
        getProduct(){
            let that = this;
            let id = that.$route.query.id;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.productContent+id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.productMsg = res.data['msg'];
                    that.productMsg.labels = that.labels(that.productMsg.items);
                    console.log(that.productMsg);
                }
            })
        },
        getSlider(){
            let that = this;
            let id = that.$route.query.id;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.productSlider+id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.productImg = res.data['msg'];
                    that.transferUrl(that.productImg);
                    console.log(that.productImg);
                    that.avatar = that.productImg[0]['image_url'];
                }
            })
        },
        decrease(){
            if(this.buyNum == 0){
                this.toast('不能再减少了！');
                return;
            }else{
                this.buyNum--;
            }
        },
        increase(){
            let stock = this.stock;
            if(this.buyNum == stock){
                this.toast('就这么多库存啦！');
                return;
            }else{
                this.buyNum++;
            }
        },
        getProductImages(){
            let that = this;
            let id = that.$route.query.id;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.productDes+id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.productDetailImages = res.data['msg'];
                    that.transferUrl(that.productDetailImages);
                }
            })
        },
        addToStore(){
            let that = this;
            let number = that.buyNum;
            let statusId = that.statusId;
            if(!number || !statusId){
                that.toast('请选择规格及数量！');
                return;
            }
            let id = that.$route.query.id;
            let token = localStorage.getItem('token');
            let productId = that.$route.query.id;
            let type = that.productMsg.type;
            let tem = {id: Number(id), norms_id:statusId, number:number, type:type};
            console.log(tem);
            let loader = that.loading('正在加入购物车...');
            that.$ajax(that, 'post', that.$api.addToStore, {id: Number(id), norms_id:statusId, number:number, type:type}, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    that.toast('加入购物车成功！');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        },
        buyNow(){
            if(this.buyNum == 0 || this.choosedStatus == ''){
                this.toast('请选择商品规格及数量！');
                return;
            }
            else{
                let that = this;
                let token = localStorage.getItem('token');
                let content = that.content;
                let temArr = [];
                let sendObj = {};
                let temObj = {};
                temObj.number = that.buyNum,
                temObj['norms_id'] = that.statusId;
                temObj['goods_id'] = that.productMsg.id;
                temArr.push(temObj);
                sendObj.goods = temArr;
                sendObj['total_number'] = 1;
                console.log(sendObj);
                console.log(that.productMsg);
                let loader = that.loading('请稍等...');
                let api = '';
                if(that.productMsg.type == 0){
                    api = that.$api.createOrder;
                }else{
                    api = that.$api.createOrderCredits;
                }
                that.$ajax(that, 'post', api, sendObj, token, function(res){
                    console.log(res);
                    if(res.data['error_code'] == 0){
                        sessionStorage.setItem('order', res.data.msg);
                        if(that.productMsg.type == 0){
                            that.$router.push('/create_order');
                        }else if(that.productMsg.type == 1){
                            that.$router.push('/create_order_credits');
                        }
                    }else{
                        that.toast(res.data.msg);
                    }
                    loader.close();
                })
                console.log(this.productMsg);
                
                // let temObj = {};
                // temObj.number = this.buyNum,
                // temObj.name = this.productMsg.name;
                // temObj.price = this.productMsg.items['price'];
                // temObj.status = this.choosedStatus;
                // console.log(temObj);
                // this.$router.push({name:'pay', params:{msg:temObj}});
            }
        },
        toMoreComment(){
            let id = this.$route.query.id;
            this.$router.push({path:'/comment_detail', query:{id: id}});
        },
        getAllComment(){
            let that = this;
            let id = that.$route.query.id;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.showComment+id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.userComment = res.data.msg[0];
                    that.commentLength = res.data.msg.length;
                }
                loader.close();
            })
        },
        shareToWx(){
            let that = this;
            let token = localStorage.getItem('token');
            let url = window.location.href;
            that.$ajax(that, 'post', that.$api.getWxInfo, {url: encodeURIComponent(window.location.href.split('#')[0])}, token, function(res){
                if(res.data['error_code'] == 0){
                    let temRes = res.data.msg;
                    alert(JSON.stringify(temRes));
                    wx.config({
                        debug: true,
                        appId: temRes.appId,
                        timestamp: temRes.timestamp,
                        nonceStr: temRes.nonceStr,
                        signature: temRes.signature,
                        jsApiList:['onMenuShareAppMessage','onMenuShareTimeline'] 
                    })
                    wx.error(function(res){
                        that.toast('信息验证失败！');
                    });
                    wx.ready(function(){
                        alert('wx ready');
                        wx.onMenuShareTimeline({
                            title: '中国制造',
                            link: 'http://dahua-soft.com',
                            imgUrl: 'http://palk082f3.bkt.clouddn.com/image/center/user_avatar.png',
                            success:function(res){
                                alert(res,'success');
                                that.toast('分享成功！');
                            }
                        });
                        wx.onMenuShareAppMessage({
                            title: '中国制造',
                            link: 'http://dahua-soft.com',
                            desc:'122222222222',
                            imgUrl: 'http://palk082f3.bkt.clouddn.com/image/center/user_avatar.png',
                            success(res){
                                alert(res,'success');
                                that.toast('分享成功！');
                            }
                        });
                    })
                }
            })
        },
    },
    mounted(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.layerStyle.height = clientHeight*scale/100;
        this.layerStyle.transY = clientHeight*scale/100;
        this.$store.state.tab = '商品详情';
        this.productId = this.$route.query.id;
    },
    beforeMount(){
        this.getProduct();
        this.getSlider();
        this.getProductImages();
        // this.status = JSON.parse(sessionStorage.getItem('status'));
        // this.stock = sessionStorage.getItem('stock');
    },
    activated(){
        this.getProduct();
        this.getSlider();
        this.getProductImages();
        this.getAllComment();
        this.$store.state.tab = '商品详情';
        // this.status = JSON.parse(sessionStorage.getItem('status'));
        // this.stock = sessionStorage.getItem('stock');
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.layerStyle.height = clientHeight*scale/100;
        this.layerStyle.transY = clientHeight*scale/100;
    },
    deactivated(){
        this.productImg = [];
        this.productDetailImages = [];
        this.currentIndex = 1;
        this.productId = -1;
        this.productMsg = {
            items:{
                price:0,
                prime_cost:0
            }
        };
        this.status = {};
        this.stock = 0;
        this.buyNum = 0;
        this.choosedStatus = '';
        this.statusId = -1;
        this.avatar = '';
        this.chooseKindNum = 1000000;
    },
    computed:{
        
    },
    components:{
        Swipe,
        SwipeItem
    }
}
</script>

<style lang='less'>
@rem:100rem;

.product{
    width: 750/@rem;
    margin-top: 88/@rem;
    margin-bottom: 120/@rem;
    .product-show{
        width: 100%;
        height: 750/@rem;
        position: relative;
        img{
            width: 750/@rem;
            height: 750/@rem;
        }
        .num-label{
            right: 20/@rem;
            bottom: 20/@rem;
            z-index: 99;
            position: absolute;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            span{
                font-size: 20/@rem;
                color: #2e2e2e;
            }
        }
    }
    .product-name{
        font-size: 30/@rem;
        width: 100%;
        background: #ffffff;
        p{
            width: 662/@rem;
            margin: 0 auto;
            padding-top: 10/@rem; 
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: start;
        }
    }
    .product-price{
        width: 100%;
        height: 96/@rem;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        .price{
            margin-left: 40/@rem;
            span:nth-of-type(1){
                color: #fd4141;
                font-size: 30/@rem;
            }
            span:nth-of-type(2){
                color: #868686;
                font-size: 22/@rem;
                text-decoration: line-through;
            }
            span:nth-of-type(3){
                color: #868686;
                font-size: 22/@rem;
                margin-left: 20/@rem;
            }
            span:nth-of-type(4){
                color: #868686;
                font-size: 22/@rem;
            }
        }
        .collect{
            width: 154/@rem;
            height: 54/@rem;
            border: 1px solid #ffa970;
            border-radius: 27/@rem;
            margin-right: 20/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                height: 28/@rem;
                width: 30/@rem;
                margin-right: 18/@rem;
            }
            span{
                font-size: 26/@rem;
                color: #fe6f0f;
            }
        }
    }
    .product-standard{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 80/@rem;
        background: #ffffff;
        img{
            width: 36/@rem;
            height: 36/@rem;
            margin-right: 20/@rem;
        }
        span{
            font-size: 26/@rem;
            margin-left: 20/@rem;
        }
    }
    .user-comment{
        width: 100%;
        margin-top: 10/@rem;
        .comment-head{
            width: 100%;
            height: 80/@rem;
            display: flex;
            box-sizing: border-box;
            padding: 0 24/@rem;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            .right{
                display: flex;
                align-items: center;
                img{
                    width: 30/@rem;
                    height: 30/@rem;
                    margin-left: 6/@rem;
                }
            }
        }
        .user-avatar{
            width: 100%;
            padding: 20/@rem 0;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            .avatar-msg{
                display: flex;
                align-items: center;
                margin-left: 24/@rem;
                .avatar-box{
                    height: 80/@rem;
                    width: 80/@rem;
                    border-radius: 50%;
                    overflow: hidden;
                    display: flex;
                    align-items:center;
                    justify-content: center;
                    img{
                        height: 80/@rem;
                    }
                }
                span:nth-of-type(1){
                    font-size: 26/@rem;
                    color: #868686;
                    margin-left: 10/@rem;
                }
                span:nth-of-type(2){
                    font-size: 22/@rem;
                    color: #fd4141;
                    margin-left: 10/@rem;
                }
            }
            .stars-level{
                display: flex;
                align-items: center;
                margin-right: 24/@rem;
                .star{
                    width: 26/@rem;
                    height: 26/@rem;
                    margin-right: 6/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 26/@rem;
                        height: 26/@rem;
                        
                    }
                }
            }
        }
        .comment-content{
            width: 100%;
            height: 150/@rem;
            background: #fff;
            box-sizing: border-box;
            padding: 0 24/@rem;
            text-align: start;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            p:nth-of-type(1){
                 font-size: 30/@rem;
                 color: #333333;
            }
            p:nth-of-type(2){
                font-size: 20/@rem;
                color: #868686;
                margin-top: 20/@rem;
            }
        }
        .more-comment{
            width: 100%;
            padding-bottom: 30/@rem;
            margin-top: 0 auto;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                height: 30/@rem;
                width: 30/@rem;
                vertical-align: middle;
                margin-left: 10/@rem;
            }
        }
    }

    .product-detail{
        width: 100%;
        margin-top: 14/@rem;
        img{
            width: 750/@rem;
        }
    }
    .buy-btns{
        width: 100%;
        height: 102/@rem;
        background: #ffffff;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        .left{
            display: flex;
            width: 322/@rem;
            .icon{
                display: flex;
                flex-direction: column;
                width: 50%;
                align-items: center;
                justify-content: center;
                img{
                    width: 40/@rem;
                    height: 36/@rem;
                }
                span{
                    color: #868686;
                    margin-top:8/@rem;
                }
            }
        }
        .middle{
            width: 218/@rem;
            height: 100%;
            background: #fab45a;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .right{
            width: 210/@rem;
            height: 100%;
            background: #fd4141;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
        }
    }
    .layer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
    }
    .layer-content{
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9999999;
        width: 100%;
        background: #fff;
        left: 0;
        bottom: 0;
        
        .close-layer{
            position: absolute;
            right: 0;
            top: 0;
            height: 90/@rem;
            width: 90/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 42/@rem;
                height: 42/@rem;
            }
        }
        .product-price-layer{
            width: 100%;
            height: 148/@rem;
            display: flex;
            .product-img{
                width: 180/@rem;
                height: 180/@rem;
                margin-top: 6/@rem;
                border-radius: 10/@rem;
                border: 2/@rem solid #868686;
                overflow: hidden;
                margin-left: 20/@rem;
                img{
                    width: 180/@rem;
                    height: 180/@rem;
                }
            }
            .product-price-detail{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-left: 20/@rem;
                p:nth-of-type(1){
                    font-size: 34/@rem;
                    color: #fd4141;
                    margin-top: 40/@rem;
                }
                p:nth-of-type(2){
                    margin-top: 20/@rem;
                }
            }
        }
        .product-kinds{
            width: 100%;
            margin-top: 56/@rem;
            .kinds-title{
                text-align: start;
                font-size: 24/@rem;
                margin-left: 20/@rem;
            }
            .kinds-list{
                width: 100%;
                margin-top: 20/@rem;
                .kinds-detail{
                    text-align: start;
                    margin-left: 20/@rem;
                    margin-bottom: 20/@rem;
                    span{
                        border-radius: 6/@rem;
                        border: 2/@rem solid #333333;
                        display: inline-block;
                        padding: 20/@rem 34/@rem;
                    }
                    .kindsActive{
                        border-color: #fd4141;
                        color: #fd4141;
                    }
                }
            }
        }
        .buy-num{
            width: 100%;
            margin-top: 50/@rem;
            .buy-num-title{
                text-align: start;
                margin-left: 20/@rem;
            }
            .btns-group{
                display: flex;
                align-items: center;
                margin-top: 30/@rem;
                .group{
                    display: flex;
                    margin-left: 20/@rem;
                    width: 320/@rem;
                    height: 64/@rem;
                    border: 2/@rem solid #333333;
                    border-radius: 6/@rem;
                    span{
                        display: inline-block;
                        width: 33.3%;
                        line-height: 64/@rem;
                        text-align: center;
                        font-size: 40/@rem;
                    }
                    span:nth-of-type(2){
                        font-size: 30/@rem;
                        box-sizing: border-box;
                        border-left: 1px solid #333333;
                        border-right: 1px solid #333333;
                    }
                    span:active{
                        background: #efefef;
                    }
                }
                .limit{
                    margin-left: 25/@rem;
                }
            }
            .inventory{
                margin-top: 40/@rem;
                text-align: start;
                span{
                    margin-left: 20/@rem;
                }
            }
        }
        .confing-btn{
            width: 100%;
            height: 105/@rem;
            background: #fd4141;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-top: 140/@rem;
        }
    }
}
</style>
